<template>
    <div class="page-hero bg-grey-1">
        <div class="topbar bg-black py-2 px-3 d-flex ai-center">
            <img src="../assets/img/touxiang.jpg" height="30px">
    <div class="px-3 flex-1">
          <span class="text-white">王者荣耀</span>
            <span class="pl-2 text-white">攻略站</span>
    </div>       
            <router-link tag="div" to="/home" class="text-white fs-xs">更多英雄 &gt</router-link>
        </div>
               <div class="top" :style="{'background-image':`url(${model.banner})`}">
               <div class="info p-3 text-white d-flex h-100 flex-column jc-end">
                   <div class="fs-sm">{{model.title}}</div>
                   <strong class="fs-xl my-2">{{model.name}}</strong>
                   <div>{{cats}}</div>
                  <div class="d-flex jc-between">
                       <div class="scores d-flex ai-center" v-if="model.scores">
                       <span>难度</span>
                       <span class="bg-primary bg-cores">{{model.scores.difficult}}</span>
                        <span>技能</span>
                       <span class="bg-primary bg-cores">{{model.scores.skills}}</span>
                        <span>攻击</span>
                       <span class="bg-primary bg-cores">{{model.scores.attack}}</span>
                        <span>生存</span>
                       <span class="bg-primary bg-cores">{{model.scores.survive}}</span>
                   </div>
                   <router-link tag="span" to="/" class="fs.sm text-grey">皮肤: 2&gt</router-link>
               </div>
               </div>

               <!-- 技能信息 -->
               <div class="skills mt-3">
                   <h2 class="pl-2">技能信息:</h2>
                   <div class="d-flex jc-between">                     
                       <div class="m-3"  v-for="(item,index) in model.skills" :key="index" 
                       @click="skillsindex = index"
                       :class="{'active':skillsindex === index}">
                            <img :src="item.icon" class="img">
                     </div>                               
                   </div>
                     <div class="skillsinfo">
                       <div class="py-2 px-3">
                            <span class=" fs-xl">{{model.skills[skillsindex].name}}</span>
                            <span class="pl-3">(冷却值:0 消耗:0)</span>
                       </div>                     
                       <div class="p-3">{{model.skills[skillsindex].description}}</div>
                   </div>
               </div>

               <!-- 技能和装备建议 -->
               <div class="mt-3" >
                   <div class="tips">
                       <h2 class="pl-2">加点建议:</h2>
                       <div class="d-flex jc-around">
                            <div class="text-center">
                                <div class="pb-3 fs-xl">主升</div>
                                <img :src="model.skills[3].icon" style="width:50px;">
                                <div class="fs-sm pt-2">{{model.skills[3].name}}</div>
                            </div>
                            <div class="text-center">
                                <div class="pb-3 fs-xl">副升</div>
                                <img :src="model.skills[2].icon" style="width:50px;">
                                <div class="fs-sm pt-2">{{model.skills[2].name}}</div>
                            </div>
                       </div>                   
                   </div>
                   <!-- 出装推荐 -->
                   <div class="mt-5 pb-4" style="border-bottom: 1px solid;">
                       <h2 class="pl-2">出装推荐:</h2>
                                <div class="m-3 fs-xl">顺丰出装</div>
                                <div class="d-flex jc-around" >
                                    <div  v-for ="(items,i) in model.item1" :key="i">
                                         <img  :src="items.icon" style="width:50px;">
                                         <div class="fs-sm pt-2  text-center">{{items.name}}</div>
                                    </div>   
                            </div>
                                <div class="m-3 fs-xl">逆风出装</div>
                                <div class="d-flex jc-around" >
                                    <div  v-for ="(items,i) in model.item2" :key="i">
                                         <img :src="items.icon" style="width:50px;">
                                         <div class="fs-sm pt-2 text-center">{{items.name}}</div>
                                    </div>   
                            </div>
                       </div>  
              </div>         
                    <!-- 小提示 -->
                    <div class="tipsinfo mt-3">
                        <div class="pl-2 pb-3" style="border-bottom: 1px solid;">
                            <h2 class="iconfont icon-heroku"><span class="pl-2">使用技巧</span></h2>
                            <div class="fs-sm">{{model.usageTips}}</div>
                        </div>
                        <div class="pl-2 pb-3" style="border-bottom: 1px solid;">
                            <h2 class="iconfont icon-heroku"><span class="pl-2">对抗技巧</span></h2>
                            <div class="fs-sm">{{model.battleTips}}</div>
                        </div>
                        <div class="pl-2 pb-3" style="border-bottom: 1px solid;">
                            <h2 class="iconfont icon-heroku"><span class="pl-2">团战思路</span></h2>
                            <div class="fs-sm">{{model.teamTips}}</div>
                        </div>
                    </div> 

                    <!-- 英雄关系 -->
                    <div>
                        <div class="pl-2 pb-3" style="border-bottom: 1px solid;">
                            <h2 class="iconfont icon-heroku"><span class="pl-2">英雄关系</span></h2>
                            <div class="pl-2 pb-3 fs-xl">最佳搭档</div>
                            <div class="py-3" v-for="item in model.partners">
                                <strong class="text-dark px-2">{{item.hero.name}}:</strong>
                                <span class="fs-sm">{{item.description}}</span>
                            </div>
                        </div>
                    </div>                  
               </div>
         </div>
</template>

<script>
export default {
    name: 'VueHeroes',
    data() {
        return {
            model:{
                skills:[
                   {
                       name:'',
                       icon:''
                   }
                ],
                
            },
            cats:'',
            skillsindex:0
        }
    },
    props:{
        id:{require:true}
    },
    methods: {
       async fetch(){
            const res = await this.$http.get(`heroes/${this.id}`)
            this.model = res.data
            this.cats = this.model.categories.map(v=>v.name).join('/')
        }
    },
    created() {
        this.fetch()
    }
};
</script>

<style lang="scss">
.page-hero{
    .info{
        background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
    }
    .top{
        background: #fff no-repeat top center;
        height: 50vw;
        background-size: auto 100%;
        .bg-cores{
            margin: 0 0.25rem;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            display: inline-block;
            text-align: center;
            border-radius: 50%;
            font-size: 0.6rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    }
    .skills{
        border-bottom: 1px solid;
        .img{
            width: 50px;
            flex-wrap: nowrap;
            display: block;
        }
        .text{
            float: left;
        }
        .active{
            border: 1px solid #db9e3f;
            border-radius: 50%;
        }
    }
}
</style>